import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { useRequest, useSize, useEventEmitter } from 'ahooks'
import { useRef, useState, useEffect } from 'react'
import { Progress } from 'antd'
import { Pie, Column } from '@ant-design/plots'
import { ProjectListTem, PieTemplate, PieCharts, AfterList, complexColumnTemplate } from '../Template'
import { project } from '../../../../Common/Data'
import { Http } from '../../../../Common/Api'
import dayjs from 'dayjs'
import { FrontModalBox } from '../../Assets/Modal'
const { imageUrl } = project[window.location.hostname]

const ColorOne = ['rgba(161, 221, 255, 1)', 'rgba(229, 125, 221, 1)', 'rgba(59, 171, 233, 1)', 'rgba(109, 255, 209, 1)']

export const TwoOne = () => {
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)

    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => setActive(val))

    const [Active, setActive] = useState()

    const ListOne = [
        { uuid: 1, label: '项目管理人员', value: 'one', color: 'rgba(161, 221, 255, 1)' },
        { uuid: 2, label: '安全人员', value: 'two', color: 'rgba(229, 125, 221, 1)' },
        { uuid: 3, label: '技术人员', value: 'thr', color: 'rgba(59, 171, 233, 1)' },
        { uuid: 4, label: '施工人员', value: 'fou', color: 'rgba(109, 255, 209, 1)' },
    ]

    // const DataOne = { one: 50, two: 51, thr: 52, fou: 53 }
    const [DataOne, setDataOne] = useState()
    const [DataTwo, setDataTwo] = useState()
    const [DataThr, setDataThr] = useState([])
    const [PieOne, setPieOne] = useState([])
    const [PieTwo, setPieTwo] = useState([])

    const ListTwo = [
        { uuid: 1, label: '在册员工', value: 'one', color: 'rgba(143, 237, 125, 1)' },
        { uuid: 2, label: '劳务派遣', value: 'two', color: 'rgba(116, 179, 255, 1)' },
    ]

    // const DataThr = [
    //     { type: '进场人数', label: '项目管理人员', value: 1 },
    //     { type: '进场人数', label: '安全人员', value: 2 },
    //     { type: '进场人数', label: '技术人员', value: 3 },
    //     { type: '进场人数', label: '施工人员', value: 4 },
    //     { type: '考勤人数', label: '项目管理人员', value: 5 },
    //     { type: '考勤人数', label: '安全人员', value: 6 },
    //     { type: '考勤人数', label: '技术人员', value: 7 },
    //     { type: '考勤人数', label: '施工人员', value: 8 },
    // ]

    const ListFou = [
        { uuid: 1, label: '培训次数', value: 'one', img: 'SixOne012.png' },
        { uuid: 2, label: '培训人次', value: 'two', img: 'SixOne013.png' },
    ]

    const DataFou = { one: 12, two: 13 }

    const { runAsync: getOne } = useRequest(Http, {
        manual: true.valueOf,
        onSuccess: res => {
            setDataOne({
                one: res.list[0].personCount,
                two: res.list[1].personCount,
                thr: res.list[2].personCount,
                fou: res.list[3].personCount,
            })
            setPieOne(res.list.map(item => ({ type: item.tableName, value: item.personCount })))
            let data = []
            res.list.forEach(item => {
                data = [
                    ...data,
                    { type: '进场人数', label: item.tableName, value: item.personCount },
                    { type: '考勤人数', label: item.tableName, value: item.attendanceCount },
                ]
            })
            setDataThr(data)
        },
    })
    const { runAsync: getTwo } = useRequest(Http, {
        manual: true.valueOf,
        onSuccess: res => {
            setDataTwo({ one: res.list[0].person, two: res.list[1].person })
            setPieTwo(res.list.map(item => ({ type: item.tableName, value: item.person })))
        },
    })

    useEffect(() => {
        if (Active) {
            getOne({
                url: 'getPersonStatGetPersonTypeStatAttendanceByOrg',
                data: { date: dayjs().format('YYYY-MM-DD'), organizationUuid: Active },
            })
            getTwo({ url: 'getJTGJPersonCategoryCountByOrg', data: { organizationUuid: Active } })
        }
    }, [Active, getOne, getTwo])

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <>
            <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            <div className="Right">
                <CommonSmallTitle title="人员统计" style={{ marginBottom: 16 }}>
                    <div className="one">
                        <div>
                            <Pie
                                {...PieCharts({
                                    size: 240,
                                    data: PieOne,
                                    color: ColorOne,
                                    statistic: {
                                        title: {
                                            fontSize: 44,
                                            fontFamily: 'Bahnschrift',
                                            fontWeight: 'bold',
                                            color: '#FFFFFF',
                                        },
                                        content: {
                                            fontSize: 20,
                                            fontFamily: 'MicrosoftYaHei',
                                            fontWeight: 'bold',
                                            color: '#5FE9FF',
                                        },
                                    },
                                })}
                            />
                            <AfterList
                                list={ListOne}
                                data={DataOne}
                                style={{
                                    '--DivWidth': '100%',
                                    '--FirstSize': '30px',
                                    '--LastSize': '30px',
                                    '--AfterHight': '8px',
                                    '--AfterBtm': '4px',
                                }}
                                click={() => {
                                    setOptionsCall({
                                        type: 'TableList',
                                        data: { uuid: '', title: '人员统计', type: 'SecondaryPersonnelTemplate' },
                                    })
                                }}
                            />
                        </div>
                        <div>
                            <Pie
                                {...PieTemplate({
                                    size: 160,
                                    data: PieTwo,
                                    color: ['rgba(143, 237, 125, 1)', 'rgba(116, 179, 255, 1)'],
                                })}
                            />
                            <AfterList
                                list={ListTwo}
                                data={DataTwo}
                                style={{
                                    '--DivWidth': '100%',
                                    '--FirstSize': '30px',
                                    '--LastSize': '30px',
                                    '--AfterHight': '8px',
                                    '--AfterBtm': '4px',
                                }}
                            />
                        </div>
                    </div>
                </CommonSmallTitle>
                <div className="Btm">
                    <CommonSmallTitle title="项目考勤" flex={975} style={{ marginRight: 16 }}>
                        <div className="two">
                            <div className="two" ref={ChartThr}>
                                {SizeThr && (
                                    <Column
                                        {...complexColumnTemplate({
                                            size: SizeThr,
                                            data: DataThr,
                                            color: ['rgba(255, 203, 79, 1)', 'rgba(58, 225, 196, 1)'],
                                            isGroup: true,
                                        })}
                                        onReady={plot =>
                                            plot.on('plot:click', () => {
                                                setOptionsCall({
                                                    type: 'TableList',
                                                    data: {
                                                        uuid: '',
                                                        title: '人员统计',
                                                        type: 'SecondaryPersonnelTemplateNew',
                                                    },
                                                })
                                            })
                                        }
                                    />
                                )}
                            </div>
                        </div>
                    </CommonSmallTitle>
                    {/* <CommonSmallTitle title="人员培训" flex={265}>
                        <div className="thr">
                            <Progress
                                trailColor="rgba(1, 129, 153, 1)"
                                strokeColor="rgba(255, 251, 80, 1)"
                                // strokeLinecap="butt"
                                type="circle"
                                size={150}
                                strokeWidth={16}
                                percent={90}
                                format={() => (
                                    <div className="ChartsBox">
                                        <div>90%</div>
                                        <div>覆盖率</div>
                                    </div>
                                )}
                            />
                            <div>
                                {ListFou.map(({ uuid, label, value, img }) => (
                                    <div key={uuid}>
                                        <img src={imageUrl + img} alt="" />
                                        <div>
                                            <div>{label}</div>
                                            <div>{DataFou[value]}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle> */}
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
